// 本文件内JS专用于底部footer

// 动画函数用于触发动画
function triggerAnimation(el, animationName) {
    el.style.animation = `${animationName} ease-in-out forwards`;
    // 动画结束后移除 避免重复触发
    setTimeout(() => {
        el.style.animation = '';
    }, 3100);
};

// 获取元素
let footerLogo = document.querySelector('.footer_logo');
let footerNavi = document.querySelector('.footer_navi');
let footerMainParts = document.querySelectorAll('.footer_main .footerw');
let footerFooterLeft = document.querySelector('.footer_footer .left');
let footerFooterRight = document.querySelector('.footer_footer .right');

let footerMainPartsArray = Array.from(footerMainParts);

// console.log(footerFooterLeft, footerFooterRight, footerLogo, footerMainParts, footerNavi);

// 设置动画的名称
let animations = {
    footerLogo: 'fadeIn .4s',
    footerNavi: 'fadeIn .8s',
    // DOM 元素要对应，此时为数组，并不是DOM 元素！
    // footerMainPartsArray: ['fadeIn 1.2s', 'fadeIn 1.5s', 'fadeIn 1.8s', 'fadeIn 2.1s'],
    footerFooterLeft: 'slideFromLeft 2.6s',
    footerFooterRight: 'slideFromLeft 3.1s'
};

// 所以在此单独声明一个变量来存储各自动画的信息
let footerMainPartsAnimations = ['fadeIn 1.2s', 'fadeIn 1.5s', 'fadeIn 1.8s', 'fadeIn 2.1s'];

// 基于观察者模式的API：IntersectionObserver
let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            let animationName;
            if (entry.target === footerLogo) {
                animationName = animations.footerLogo;
            } else if (entry.target === footerNavi) {
                animationName = animations.footerNavi;
            } else if (footerMainPartsArray.includes(entry.target)) {
                // entry.target 是 DOM元素
                let index = footerMainPartsArray.indexOf(entry.target);
                // 通过额外的数组来获取动画的名称
                animationName = footerMainPartsAnimations[index];
            } else if (entry.target === footerFooterLeft) {
                animationName = animations.footerFooterLeft;
            } else if (entry.target === footerFooterRight) {
                animationName = animations.footerFooterRight;
            }

            if (animationName) {
                triggerAnimation(entry.target, animationName);
                observer.unobserve(entry.target);
            }
        }
    });
}, {
    rootMargin: '0px',
    threshold: 0.1  
});

// 监视所有懒加载元素
[footerLogo, footerNavi, ...footerMainPartsArray, footerFooterLeft, footerFooterRight].forEach(element => {
    observer.observe(element);
});

// let observer = new IntersectionObserver((entries, observer) => {
//     entries.forEach(entry => {
//         // 如果进入可视区
//         if (entry.isIntersecting) {
//             // 根据元素触发对应动画
//             if (entry.target === footerLogo) {
//                 triggerAnimation(footerLogo, animations.footerLogo);
//             } else if (entry.target === footerNavi) {
//                 triggerAnimation(footerNavi, animations.footerNavi);
//             } else if (footerMainParts.includes(entry.target)) { // includes 方法, 数组内是否包含一个指定的值, 返回Boolean 值
//                 // 获得对应的index
//                 let index = Array.from(footerMainParts).indexOf(entry.target);
//                 triggerAnimation(entry.target, animations.footerMainParts[index]);
//             } else if (entry.target === footerFooterLeft) {
//                 triggerAnimation(footerFooterLeft, animations.footerFooterLeft);
//             } else if (entry.target === footerFooterRight) {
//                 triggerAnimation(footerFooterRight, animations.footerFooterRight);
//             }

//             // 停止观察 (即避免再次或多次触发)
//             observer.unobserve(entry.target);
//         }
//     });
// }, {
//     rootMargin: '0px',
//     threshold: 0.1  // 可视区的占比 => 10%
// });

// // 监视所有懒加载元素
// [footerLogo, footerNavi, ...footerMainParts, footerFooterLeft, footerFooterRight].forEach((el) => {
//     observer.observe(el);
// });
